<template>
    <div class="product-item" @click="selectProductItem">
    	<div class="row middle-xs">
    		<div class="col-xs-8 p-title">{{title}}</div>
    		<div class="col-xs-4 p-term active-color position-relative">
    			<drop-down
    				@on-change="selectChange"
    				:data-options="dataOptions"
				    :data-place-holder="dataPlaceHolder"
				    :data-name="'term'"
    			>
    			</drop-down>
    		</div>
    		<!-- <div class="col-xs-2">
    			<div class="arrow-down"></div>
    		</div> -->
    	</div>
      <div class="row progress-bar">
        <div class="progress-bar-active"
        :style="{width:percentage+'%'}"></div>
      </div>
    	<div v-show='hasData'>
      	<div class="row contain-down middle-xs">
      		<div class="col-xs-4 p-percentage active-color">{{parseInt(percentage)}}%</div>
      		<div class="col-xs-8 p-value text-right">{{parseFloat(value).toFixed(2)}}</div>
      	</div>
      </div>
      <div v-show='!hasData'>
        <div class="text-center contain-down">No Matches</div>
      </div>
    </div>
</template>

<style lang="sass">
@import "../../public/css/common.scss";
</style>

<script>
import Slider from '../../public/plugins/bootstrap-slider/bootstrap-slider.min.js';
import { UUID } from '../../public/common/Common';
export default {

	replace: true,

	props: {
		title:{
			type:String,
		},
		term:{

		},
		percentage:{

		},
		value:{

		},
		dataOptions:{
			type: Array,
			default: ()=>[]
		},
		dataPlaceHolder:{
			type: Object,
			default: ()=>{}
		},
    groupIndex:{
      type:Number
    },
    hasData:{
      type:Boolean
    },
    groupIndex:{
      type:Number
    },
    groupId:{
      type:String
    }
	},
	components:{
		'dropDown': require('./dropDown.vue')
	},
	data() {

		return {
		}
	},
	watch:{
    'dataPlaceHolder':function(nal){
      console.log('!!!',nal)
    }
	},
	methods: {
		selectChange:function(newVal,newText,index){
			console.log(newVal,newText,index);
			this.dataPlaceHolder = this.dataOptions[index];
      this.$emit("on-product-term-change",{groupId:this.groupId,term:newText,index:this.groupIndex});
		},
    selectProductItem:function(){
      this.$emit("on-product-select",{groupId:this.groupId,index:this.groupIndex});
    }
	},
	ready() {
		// console.log('dataPlaceHolder:',this.dataPlaceHolder);
	}
}
</script>
